<template>
  <el-dialog class="add-dia social-serve-add privilege-edit" :title="$store.state.dia.privilege.title" :visible.sync="$store.state.dia.privilege.show">
    <ul class="content-box">
      <li v-if="$store.state.dia.privilege.isAdd">
        <el-select
          v-model="selectTeachers"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="false">
          <el-option
            v-for="(item,index) in teachers"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li>
      <li v-for="(item, index) in menuData" :key="index">
        <el-checkbox v-model="item.checked" @change="handleAllChange(item)">{{item.title}}</el-checkbox>
        <div class="more" v-if="item.children">
          <el-checkbox-group v-model="item.values" @change="handleChange(item)">
            <el-checkbox v-for="(opt,optIndex) in item.children" :label="opt.id" :key="optIndex">{{opt.title}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </li>
    </ul>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$store.state.dia.privilege.show = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      menuData:[
        {
          title:"学生管理",
          id:"1",
          checked:false
        },{
          title:"教师管理",
          id:"2",
          checked:false,
          values:[],
          children:[
            {
              title:"教职工基本信息",
              id:"1"
            },{
              title:"学术论文统计",
              id:"2"
            },{
              title:"科技著作出版统计",
              id:"3"
            },{
              title:"学术会议统计",
              id:"4"
            },{
              title:"学术交流活动统计",
              id:"5"
            },{
              title:"教学信息统计",
              id:"6"
            }
          ]
        },{
          title:"个人中心",
          checked:false
        },{
          title:"权限管理",
          checked:false
        },{
          title:"消息中心",
          checked:false
        }
      ],

      selectTeachers:[],
      teachers:[],
      settime:null
    };
  },
  methods: {
    // 远程搜搜
    remoteMethod(query){
      clearTimeout(this.settime)
      this.settime=setTimeout(()=>{
        if (query !== ''){
          _g.apiPost("auth/searchteacher",{search:query}).then(res=>{
            this.teachers=res.data.map(val=>{
              return {
                label:val.name,
                value:val.number
              }
            })
          })
        }
      },400)
      
    },
    handleAllChange(item){
      if(item.children){
        this.$set(item,"values",item.checked?item.children.map(val=>val.id):[])
      }
    },
    handleChange(item){
      this.$set(item,"checked",item.values.length==item.children.length)
    },
    save(){
      var params={
        number:this.selectTeachers,
        content:[]
      }
      this.menuData.forEach(ele => {
        if(ele.checked&&ele.children.length==0){
          params.content.push(ele.id)
        }else if(ele.children.length>0){
          if(ele.checked)params.content.push(ele.id)
          params.content=params.content.concat(ele.values)
        }
      });
      if(this.selectTeachers.length===0){
        _g.toastMsg("warning","至少选中一个老师")
        return
      }else if(params.content.length===0){
        _g.toastMsg("warning","至少选中一种权限")
        return
      }

      _g.apiPost("auth/save",params).then(res=>{
        _g.toastMsg(res.code?"error":"success",res.msg)
        this.$emit("getList")
        bus.$emit("getList")
        this.$store.state.dia.privilege.show=false
      })
    },


    getMenu(){
      _g.apiPost("auth/lists").then(res=>{
        res.data.forEach(ele=>{
          if(ele.children)ele.values=[]
          ele.checked=false
        })
        this.menuData=res.data
      }).then(()=>{
        if(!this.$store.state.dia.privilege.isAdd)_g.apiPost("auth/find",{number:this.$store.state.dia.privilege.number}).then(res=>{
          this.selectTeachers=[this.$store.state.dia.privilege.number]
          this.menuData.forEach(ele=>{
            if(res.data.content.includes(ele.id.toString())&&ele.children.length==0){
              ele.checked=true
            }else if(ele.children.length>0){
              ele.values=[]
              ele.children.forEach(ele1=>{
                if(res.data.content.includes(ele1.id.toString()))ele.values.push(ele1.id)
                if(ele.values.length==ele.children.length)ele.checked=true
              })
            }
          })
        })
      })
    }
  },
  created() {
    this.getMenu()
  }
};
</script>
<style scoped>
.edit {
}
ul{
  width: 100%;
}
li{
  margin-top: 10px;
}
.more{
  margin-top: 5px;
  padding-left: 20px;
  color: #999;
}
</style>